﻿@{
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
    ViewBag.Title = "网非e学院--播放课程";
    var video = ViewBag.Video as XZL.Web.Da.Proc_CourseItem_SelectInfoByItemIDResult;
    var videoList = ViewBag.VideoList as List<XZL.Web.Da.Proc_CourseItem_SelectListByCourseIDResult>;
    var commetList = ViewBag.CommetList as List<XZL.Web.Da.Proc_Comment_SelectListResult>;
}

<div class="ci_VideoTop">
    <video src="@video.VideoLink" controls="controls" class="ci_courseImg" id="video" webkit-playsinline="true">您的浏览器不支持 video 标签。</video>
    <div class="ci_NavList">
        <div class="ci_Nav">课程章节</div>
        <div class="ci_Nav">学员评价</div>
    </div>
</div>

<div id="TopHeight" style="height:300px;"></div>
<br />
<div class="ci_CourseList">
    @*<div class="ci_CourseInfo">
            @video.ItemName <br />
            开始时间：<span class="ci_CourseTxt">@video.StartTime </span><br />
            参与人数： <span class="ci_CourseTxt">@video.JoinCount 人</span><br />
        </div>
        <div class="ci_Space"></div>
        <div class="ci_Title">视频列表</div>*@
    <div class="ci_CourseInfo ci_VideoList">
        @foreach (var item in videoList)
        {
            //未开播课程
            if (item.StartTime > DateTime.Now)
            {
                <div class="ci_VideoItem" style="color:#ccc" onclick=" ShowModal('未到开课时间，请您耐心等待！');">
                    <img class="ci_VideoImg" src="@item.Image" />
                    <span class="ci_VideoName">
                        @item.ItemName
                    </span>
                    <span class="ci_videoTime">
                        @Convert.ToDateTime(item.StartTime).ToString("MM/dd HH:mm")
                    </span>
                </div>
            }
            //过期课程
            else if (item.StartTime.Value.AddHours(Convert.ToInt32(item.ValidTime)) < DateTime.Now)
            {
                <div class="ci_VideoItem" style="color:#ccc" onclick="ShowModal('该课程已过期！');">
                    <img class="ci_VideoImg" src="@item.Image" />
                    <span class="ci_VideoName">
                        @item.ItemName
                    </span>
                    <span class="ci_videoTime">
                        @Convert.ToDateTime(item.StartTime).ToString("MM/dd HH:mm")
                    </span>
                </div>
            }

            //可播放课程
            else
            {
                //当前选中
                if (item.ItemID == video.ItemID)
                {
                    <div class="ci_VideoItem" style="color:orange; " onclick="document.location = '../../Course/CoursePlay/@item.ItemID'">
                        <img class="ci_VideoImg" src="@item.Image" />
                        <span class="ci_VideoName">
                            @item.ItemName
                        </span>
                        <span class="ci_videoTime">
                            正在播放
                        </span>
                    </div>
                }
                //其他可播放课程
                else
                {
                    <div class="ci_VideoItem" onclick="document.location = '../../Course/CoursePlay/@item.ItemID'">
                        <img class="ci_VideoImg" src="@item.Image" />
                        <span class="ci_VideoName">
                            @item.ItemName
                        </span>
                        <span class="ci_videoTime">
                            @Convert.ToDateTime(item.StartTime).ToString("MM/dd HH:mm")
                        </span>
                    </div>
                }
            }
        }
    </div>
    <div class="ci_Space"></div>
    <div class="ci_Title">课程介绍</div>
    <div class="ci_CourseInfo" style="margin-bottom:60px;">
        @video.Introduce
    </div>
</div>

<div class="ci_CourseList" style="display:none">
    <div class="cm_CommentTitle">
        <textarea class="cm_CommentTitleText" placeholder="请输入课程评价" id="txtContent"></textarea>
        <span class="customBtn cm_CommentTitleBtn" id="addComment" onclick="AddComment()" style="top:20px;">评价</span>
    </div>
    @foreach (var item in commetList)
    {
            <div class="cm_CommentItem">
                <div class="cm_CommentLeft">
                    <img class="cm_CommentImg" src="@item.HeadPortrait" />
                </div>
                <div class="cm_CommentRight">
                    <div class="cm_CommentNick">
                        @item.WeiXinName
                        <div class="cm_CommentParise" id="@item.CommentID">
                            <img src="~/Image/logoParise.png" width="16" height="16" />&nbsp;
                        </div>
                        <div class="cm_CommentPariseNum">
                            @item.PraiseNum
                        </div>
                    </div>
                    <div class="cm_CommentContent">@item.CommentContent</div>
                    <div class="cm_CommentTime">@item.CreateTime</div>
                    @if (item.ReplyContent != null && item.ReplyContent != "")
                {
                        <div class="cm_CommentNick">管理员回复：</div>
                        <div class="cm_CommentContent">@item.ReplyContent</div>
                        <div class="cm_CommentTime">@item.ReplyTime</div>
                }
                </div>
            </div>
    }
</div>

<script>
    //计算顶部高度
    var videoHeight=$("#video").height();
    $("#TopHeight").height(videoHeight+40);

    //导航切换
    $(".ci_Nav").eq(0).addClass("ci_NavSelect");

    $(".ci_Nav").click(function () {
        $(".ci_Nav").removeClass("ci_NavSelect");
        $(this).addClass("ci_NavSelect");
        var num = $(".ci_Nav").index(this);
        $(".ci_CourseList").hide();
        $(".ci_CourseList").eq(num).show();
    })

    //底部导航选中
    $("#ImgKecheng").attr("src", "../../Image/logoKechengSel.png");

    //提交评价
    function AddComment(){
        var courseID=@video.CourseID;
        var userID="@ViewBag.UserID";
        var content=$("#txtContent").val();
        if(content.length>=8){
            $.ajax({
                type: "Post",
                url: "../../Course/AddComment",
                data: { "UserID": userID,"CourseID":courseID,"Content": content},
                error: function () {  },
                success: function (data) {
                    if (data == true) {
                        ShowModal('您的评价已提交，管理员审核通过后才能显示！');
                        $("#addComment").attr("onclick","");
                        $("#txtContent").val("");
                        $("#txtContent").attr("readOnly","true");
                    }
                    else
                    {
                        ShowModal('抱歉，您的评价提交失败！');
                    }
                }
            });
        }
        else
        {
            ShowModal('请输入8-100字的课程评价！');
        }
    }

    //点赞
    $(".cm_CommentParise").click(function(){
        var userID="@ViewBag.UserID";
        var ind=$(".cm_CommentParise").index(this);
        var commentID=$(this).attr("id");
        var commentNum=$(".cm_CommentPariseNum").eq(ind).html();
        $.ajax({
            type: "Post",
            url: "../../Course/Parise",
            data: { "UserID": userID,"CommentID":commentID},
            error: function () {  },
            success: function (data) {
                if (data == 0) {
                    $(".cm_CommentPariseNum").eq(ind).html(Number(commentNum)+1);
                }
                else
                {
                    ShowModal('您已对该评论点过赞！');
                }
            }
        });
    })

    //弹出框
    function ShowModal(info) {
        layer.alert(info, {
            extend: ['skin/orange/style.css'],
            skin: 'layui-ext-orange' //样式类名
           ,closeBtn: 0
        })
    }
</script>

